<meta charset="UTF-8">
<div id="month-oil">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <Row style="margin:10px;height: 32px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 260px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <ul id="ztree" class="ztree"></ul>
                    </div>
                </transition>
            </div>
        </div>
        <div style="padding-left: 10px;" class="fl">
            <span>{{$t("reportForm.selectTime")}}:</span>
            <date-picker type="month" v-model="month" :clearable="false" style="width:120px" placement="bottom-start" :options="dateOptions"></date-picker>
        </div>

        <div style="margin-left:10px;" class="fl">
            {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
        </div>

        <div style="margin-left:10px;" class="fl">
            <i-button @click="onClickQuery" icon="ios-search">{{$t("reportForm.query")}}</i-button>
        </div>
        <div class="rt">
            <i-button type="primary" @click="exportData" icon="ios-search">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table ref="table" :columns="columns" size="small" :height="lastTableHeight" border :data="tableData" @on-row-dblclick="onDbClickRow" :loading="loading"></i-table>
    </div>
    <div style="padding-left:10px;">
        <Page :total="total" show-total @on-change="changePage" :page-size="20" :current="currentIndex" />
    </div>

    <Modal v-model="model" width="1000" :mask-closable="false">
        <div slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>{{$t("reportForm.oilMonthDetail")}}</span>
            <div style="float: right;padding-right: 20px;">
                <i-button @click="exportDataDetail" type="primary" size="small">{{$t("reportForm.exportData")}}</i-button>
            </div>
        </div>
        <div>
            <i-table ref="tableDetail" :columns="columnsDetail" size="small" :data="tableDataDetail" @on-row-dblclick="onDbClickRowTetail" height="600"></i-table>
        </div>
        <div slot="footer">

        </div>
    </Modal>
</div>